<template>
  <div class="layoutVerticle"  style="height: 100%; overflow: scroll;">
    <div class="layoutVerticle contentDiv" >
      <div class="layoutVerticle layoutHead" style="margin-bottom: -12px;position: relative;">
        <div class="layoutHorizontal verticleCenter">
          <div @click="goback()" v-if="pageType == PageTypeEnum.PREVIEW_PAGE" class="layoutHorizontal layoutCenter" style="height: 42px; width: 42px;">
            <van-icon name="arrow-left" class="back-icon" color="black" />
          </div>
          <span style="font-size: 15px; flex: 1 1 auto;text-align: center;"></span>
          <div  @click="toPreference" v-if="pageType == PageTypeEnum.HOME_PAGE" class=" layoutHorizontal layoutCenter" style="height: 42px; width: 42px;">
            <img src="@/assets/icon/home/select.png" style="height: 20px;"/>
          </div>
        </div>
        <div class="layoutHorizontal" style="margin-left: 44px; margin-bottom: 40px;">
          <img :src="userInfo['headPictureUrl']" style="width: 80px;height: 80px;border-radius: 50px;box-shadow: 0 0 0 1px white;"/>
          <div class="layoutVerticle" style="margin-left: 14px;margin-top: 10px;">
            <div class="layoutHorizontal" style="align-items: center;">
              <span style="font-size: 15px;color:white">{{userInfo['username']}}</span>
              <span style="border-radius: 50px 50px 50px 50px;color: white; background: #04ca81; padding-left: 5px; padding-right: 5px; font-size: 12px;padding-top: 2px; padding-bottom: 2px;margin-left: 10px;">已认证</span>
            </div>
            <div class="layoutHorizontal" style="align-items: center; margin-top: 10px;">
              <span style="">{{userInfo['age']}}岁</span>
              <span style="margin-left: 10px;">{{userInfo['school']}}</span>
            </div>
          </div>
        </div>
        <div style="height: 36px; background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));  position: absolute; bottom: 0px;left: 0px;right: 0px;">
        </div>
      </div>
      <div ref="homeIndex" style="flex: 1; overflow-y: auto;">
        <div style="  border-radius: 6px;  height: 300px; transform: translateY(0); position: relative; ">
          <!-- <div style="height: 30px; background: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));  position: absolute; margin-top: -20px;left: 0px;right: 0px;">
          </div> -->
          <van-swipe  :height="300" :loop="true"  style="margin: 0 10px 0 10px;border-radius: 10px;">
            <van-swipe-item v-for="(image, index) in userInfo['pictures']" :key="index" >
              <img v-lazy="image" style="width: 100%; height: 300px;object-fit: cover;" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <div style = "margin: 16px 10px; background: white; padding: 20px 16px ; border-radius: 10px;" class="layoutVerticle">
          <div class="layoutHorizontal" style="align-items: center;">
            <img src="@/assets/icon/home/self.png"  style="height: 14px; margin-right: 6px;"/>
            <span style=" color: #9296a2;white-space: pre-line;">自我介绍</span>
          </div>
          <span style="margin-top: 10px;">{{userInfo['selfDescription']}}</span>
        </div>
        <div style = "margin: 0px 10px 16px 10px; background: white; padding: 20px 16px; border-radius: 10px;" class="layoutVerticle">
          <div class="layoutHorizontal" style="align-items: center;">
            <img src="@/assets/icon/home/data.png"  style="height: 16px; margin-right: 6px;"/>
            <span style=" color: #9296a2;">基础资料</span>
          </div>
          <div class="history_wrap" v-if="userInfo['introduceList'].length>0">
            <div class="history_item">
              <van-tag   
                v-for="(item) in this.userInfo['introduceList']"
                :key="item['value']"
                type="primary"
                round
                size="medium">
                <img src="@/assets/icon/home/height.png" v-if="item['value'] == IntroduceEnum.HEIGHT" style="height: 16px; margin-right: 6px;"/>
                <img src="@/assets/icon/home/star.png"  v-if="item['value'] == IntroduceEnum.CONSTELLATION" style="height: 16px; margin-right: 6px;"/>
                <img src="@/assets/icon/home/education.png"  v-if="item['value'] == IntroduceEnum.EDUCATION_LEVEL" style="height: 16px; margin-right: 6px;"/>
                <img src="@/assets/icon/home/workIndustry.png"  v-if="item['value'] == IntroduceEnum.WORK_INDUSTRY" style="height: 16px; margin-right: 6px;"/>
                <img src="@/assets/icon/home/salary.png"  v-if="item['value'] == IntroduceEnum.YEARLY_SALARY" style="height: 16px; margin-right: 6px;"/>
                <img src="@/assets/icon/home/marital.png"  v-if="item['value'] == IntroduceEnum.MARITAL_STATUS" style="height: 16px; margin-right: 6px;"/>
                <img src="@/assets/icon/home/town.png"  v-if="item['value'] == IntroduceEnum.HOME_TOWN" style="height: 16px; margin-right: 6px;"/>
                <img src="@/assets/icon/home/live.png"  v-if="item['value'] == IntroduceEnum.LIVE_CITY" style="height: 16px; margin-right: 6px;"/>
                {{item['label']}}
              </van-tag>
            </div>
          </div>
        </div>
        <div style = " margin: 0px 10px 16px 10px; background: white; padding: 20px 16px; border-radius: 10px;" class="layoutVerticle">
          <div class="layoutHorizontal" style="align-items: center;">
            <img src="@/assets/icon/home/attach.png"  style="height: 16px; margin-right: 6px;margin-top: 3px;"/>
            <span style="color: #9296a2;">什么样的对方会吸引你？</span>
          </div>
          <span style="margin-top: 10px;white-space: pre-line;">{{userInfo['partnerDescription']}}</span>
        </div>
        <div style = " margin: 0px 10px 0px 10px; background: white; padding: 20px 16px; border-radius: 10px;" class="layoutVerticle">
          <div class="layoutHorizontal" style="align-items: center;">
            <img src="@/assets/icon/home/like.png"  style="height: 17px; margin-right: 6px;"/>
            <span style="color: #9296a2;">你觉得最浪漫的事？</span>
          </div>
          <span style="margin-top: 10px;white-space: pre-line;">{{userInfo['romanticThing']}}</span>
        </div>
        <div style = "color: #9296a2;margin-top: 20px;margin-bottom: 20px;" class="layoutHorizontal layoutCenter">
          <span style="">------&nbsp;&nbsp;&nbsp;</span>
          <span style="">已经到底啦</span>
          <span style="">&nbsp;&nbsp;&nbsp;------</span>
        </div>
        
      </div>

 
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Http } from "@/common/HttpClient";
import Vue from 'vue'
import UserInfoMixin from "@/views/mine/mixin/UserInfoMixin.js";
import { PageTypeEnum} from "@/views/home/enums/PageTypeEnum";
// 引入areaList对应的js文件
import { areaList } from "@/assets/arealist/Area.js"



export default {
  props: {
    userId: {
      type: String,
      default: '',
    },
    pageType: {
      type:Number,
      default: 0,
    },
    // userInfo: {
    //   type: Object,
    //   default: () =>({}),
    // },
  },
  mixins:[UserInfoMixin],
  data () {
    return {
      PageTypeEnum:PageTypeEnum,

      // userInfo:{
      //   username:'小达',
      //   age:37,
      //   school:'福建农林大学',
      //   introduceList:[],
      // },
      // images: [
      //   'https://img.yzcdn.cn/vant/apple-1.jpg',
      //   'https://pic.rmb.bdstatic.com/e01fc4c2c29bad7063f0edbfe177668d.jpeg',
      //   'https://img.yzcdn.cn/vant/apple-3.jpg',
      //   'https://img.yzcdn.cn/vant/apple-4.jpg'
      // ],
    };
  },
  components: {

  },
  mounted () {
    this.$nextTick(() => {
      if(this.$refs.homeIndex){
        this.$refs.homeIndex.addEventListener('scroll', this.scrollEvent)
      }

    });
    console.log("pageType:" + this.pageType);
  },
  beforeDestroy() {
    sessionStorage.removeItem("homeScroll");
    if(this.$refs.homeIndex){
      this.$refs.homeIndex.removeEventListener('scroll', this.scrollEvent)
    }
  },
  activated () {
    // this.requestUserInfo();
    console.log("城市数据：", areaList);
    // setTimeout(()=>{
    //   this.$nextTick(()=>{
        var homeScroll = sessionStorage.getItem("homeScroll")
        if(homeScroll && this.$refs.homeIndex){
          this.$refs.homeIndex.scrollTop = homeScroll
        }
    //   })
    // },  10);

    // this.$refs.userInfoCom.requestUserInfo();
  },
  methods: {
    onSearch () {
    },
    goback(){
      this.$router.go(-1);
    },
    toPreference(){
      this.$router.push({ name: 'Preference' });
    },
    scrollEvent(){
      sessionStorage.setItem("homeScroll", this.$refs.homeIndex.scrollTop)
    },
  },
};
</script>

<style lang="less" scoped>
  .layoutVerticle{
    display: flex;
    flex-direction: column;
  }

  .layoutHorizontal{
    display: flex;
    flex-direction: row;
  }

  .layoutCenter{
    justify-content: center;
    align-items: center;
  }

  .verticleCenter {
    align-items: center;
  }

  /deep/.van-cell {
    padding: 0px 0px;
  }

  /deep/.van-field__control::-webkit-input-placeholder {
      color: #666666;
      font-weight: 600;
  }

  /deep/.van-field__control {
    text-align: center;
  }



  /deep/.van-swipe .van-swipe__indicators {
      display: flex;
      justify-content: center;
  }
 
  /deep/.van-swipe .van-swipe__indicator {
      width: 10px; /* 设置指示器宽度 */
      height: 5px; /* 设置指示器高度 */
      background-color: #000; /* 设置指示器背景颜色 */
      opacity: 0.3; /* 设置非活动状态的不透明度 */
      margin: 0 3px; /* 设置指示器之间的间距 */
      border-radius: 3px; /* 设置指示器的圆角 */
  }
 
  /deep/.van-swipe .van-swipe__indicator.van-swipe__indicator--active {
      opacity: 1; /* 设置活动状态的不透明度 */
      background-color: #3676F5; /* 设置活动状态的背景颜色 */
      width: 20px; /* 可以单独设置活动状态下的宽度 */
  }


  .history_wrap {
    margin-top: 4px;
    background: #ffffff;
    overflow: scroll;
    .history_item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      /deep/.van-tag {
        margin-right: 10px;
        margin-top: 10px;
        border: 1px solid #8a8a8a;
        color: #8a8a8a;
        padding: 5px 10px;
      }
      /deep/.van-tag--primary {
        background-color: white;
      }
    }
  }

  .contentDiv{
    width: 100%;
    background: #f5f6f9;
    overflow-y: scroll;
  }

  .van-swipe-item a{
  width: 100%;
  height: 208px;
  display: inline-block;
  border-radius: 6px;
  overflow: hidden;
  }

  .layoutHead{
    background: url("~@/assets/icon/home/person.webp") no-repeat;
    // background: linear-gradient(to bottom, rgba(51, 118, 245, 1), rgba(255, 255, 255, 0.1));
    // background: linear-gradient(to bottom, rgba(54, 118, 245, 1), rgba(204, 215, 237, 0.1));
    background-size: cover;
  }

</style>
